<template>
  <div class="hotListCon">
    <div class="conAll">
      <div class="con clear" :key="item.id" v-for="item in list">
        <div class="conImg">
          <img :src="item.pics[0]">
        </div>
        <div class="conSub">
          <div class="conSubTit">
            <span>{{item.des}}</span>
          </div>
          <div class="conSubP clear">
            <span>{{'￥'+item.price}}</span>
            <span>2-5人团</span>
          </div>
          <div class="conSubGo clear">
            <span class="conJoin">{{item.hasSaleNum+'人已参团'}}</span>
            <van-button type="default" @click="goto(item.id)">去开团</van-button>
          </div>
        </div>
      </div>
    </div>
    <div class="conFooter">
      <span>亲，我也是有底线的</span>
    </div>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "hotLists",
    props: ['list'],
    methods:{
      goto(i){
        this.$router.push({
          path:'/productDetails',
          params:{
            id:i
          }
        })
      }
    }
  }
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
  }

  .clear::before,
  .clear::after {
    content: '';
    display: table;
  }

  .clear::after {
    clear: both;
  }

  .conAll {
    width: 94%;
    padding: 0 3%;
  }

  .con {
    height: 122px;
    width: 100%;
    padding: 20px 0;
    position: relative;
  }

  .con::after {
    content: '';
    position: absolute;
    left: 2%;
    bottom: -1px;
    right: 2%;
    width: 96%;
    height: 1px;
    background-color: #e8e8e8;
  }

  .conImg,
  .conSub {
    float: left;
  }

  .conImg {
    width: 30%;
    border: 1px solid #6a6363;
  }

  .conImg > img {
    width: 100%;
    height: 100%;
  }

  .conSub {
    width: 66%;
    padding-left: 3%;
    height: 120px;
  }

  .conSubTit {
    /*内容只显示两行且超过部分用...表示*/
    overflow: hidden;
    text-overflow: ellipsis; /*可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本*/
    display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示*/
    -webkit-line-clamp: 2; /*行数*/
    -webkit-box-orient: vertical; /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/
  }

  .conSubTit > span {
    font-size: 16px;
    color: #6a6363;
  }

  .conSubP {
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    margin: 5px 0;
    color: #a8a8a8;
  }

  .conSubP span:nth-child(1) {
    font-size: 25px;
    color: #fc0404;
    font-weight: bold;
  }

  .conSubP span:nth-child(2) {
    float: right;
  }

  .conJoin {
    font-size: 15px;
    color: #a8a8a8;
  }

  .conSubGo {
    height: 30px;
    line-height: 30px;
    width: 100%;
  }

  .conSubGo > button {
    float: right;
    width: 40%;
    height: 30px;
    color: #fff;
    border: none;
    background-color: #FF0000;
    border-radius: 5px;
  }

  .conFooter {
    height: 80px;
    line-height: 80px;
    text-align: center;
  }

  /*伪类选择器实现两端直线*/
  .conFooter span {
    display: block;
    position: relative;
  }

  .conFooter span:before, .conFooter span:after {
    content: ''; /*CSS伪类用法*/
    position: absolute; /*定位背景横线的位置*/
    top: 50%;
    background: #6a6363; /*宽和高做出来的背景横线*/
    width: 30%;
    height: 1px;
  }

  .conFooter span:before {
    left: 0%; /*调整背景横线的左右距离*/
  }

  .conFooter span:after {
    right: 0%;
  }
</style>
